<template>
    <div class="comment" >
        <div class="main" v-if="flag">
            <div class="bigView">
                <div class="viewBox">
                    <div class="viewItem" v-for="(item,index) in imgs" :key="index" @click="toBig(index)">
                            <div>
                                <img :src="item.src"/>
                            </div>
                            <div class="downText">
                                <div class="text">{{item.text}}</div>
                            </div>
                        </div>
                </div>
            </div>
            <footer-btn></footer-btn>
            <div class="footers"></div>
        </div>
       <div v-if="!flag" class="big">
           <div class="del" @click="del">X</div>
           <img v-if="index == 0" src="../../public/imgs/bt1.jpg" alt="">
           <img v-if="index == 1" src="../../public/imgs/bt2.jpg" alt="">
           <img v-if="index == 2" src="../../public/imgs/bt3.jpg" alt="">
           <img v-if="index == 3" src="../../public/imgs/bt4.jpg" alt="">
           <img v-if="index == 4" src="../../public/imgs/bt5.jpg" alt="">
           <img v-if="index == 5" src="../../public/imgs/bt6.jpg" alt="">
       </div>
    </div>
</template>

<style lang="less">
    .comment{
         .header{
                margin: 10px;
                height: 40px;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                color: white;
                .ret{
                    color: gray;
                }
                .shell{
                    position: relative;
                    .search{
                        position: absolute;
                        top: 6px;
                        left: 12px;
                        color: gray;
                    }
                    .setSearch{
                        color: black;
                        font-size: 14px;
                        width: 270px;
                        padding: 3px 0;
                        padding-left: 32px;
                        height: 20px;
                        line-height: 20px;
                        outline: none;
                        border: 1px solid white;
                        border-radius: 30px;
                        background: rgb(240, 242, 245);
                    }
                }
            }
        .viewBox{
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            .viewItem{
                width: 45%;
                margin: 3px 5px;
                border-radius: 10px;
                position: relative;
                img{
                    border-radius: 10px;
                    width: 100%;
                    height: 256px;
                }
                .downText{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: rgba(0, 0, 0, 0.322);
                    height: 50px;
                    margin-bottom: 5px;
                    border-radius: 10px;
                    border-top-left-radius: 0;
                    border-top-right-radius: 0;
                    width: 100%;
                    font-size: 14px;
                    color: white;
                    position: absolute;
                    bottom: 0px;
                }
                .text{
                    width: 92%;
                }
            }
        }
        .footers{
            height: 60px;
        }
        .del{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            position: absolute;
            padding: 10px;
            top: 10px;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.322);
            color: white;
        }
        .big{
            width: 100vw;
            height: 100vh;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
</style>

<script>
import footerBtn from "../components/footerBtn.vue";
    export default{
        
        data(){
            return {
                flag:true,
                index:0,
                imgs:[
                    {
                        src: "./imgs/bt1.jpg",
                        text: "广州必打卡｜市内最美夜景广州塔攻略"
                    },
                     {
                        src: "./imgs/bt2.jpg",
                        text: "19世纪英法租界地|近代史与租界史的缩影"
                    },
                     {
                        src: "./imgs/bt3.jpg",
                        text: "全球最高的四季酒店｜住在广州的云端上"
                    },
                     {
                        src: "./imgs/bt4.jpg",
                        text: "走读广州｜带你走进西关老街的前世今生"
                    },
                     {
                        src: "./imgs/bt5.jpg",
                        text: "出息了！我竟然自己开飞机去了马尔代夫"
                    },
                     {
                        src: "./imgs/bt6.jpg",
                        text: "发朋友圈被问到爆打卡天空之伞"
                    },
                    
                ],
            }
        },
    
        methods:{
            toBig(index){
                this.flag = false;
                this.index = index;
            },
            del(){
                this.flag = true;
            }
        },
        components:{
            footerBtn
        },
    };
</script>